<template>
    <div
        class="tm-tabBar-item flex-column flex-center-center"
        @click="changeTabBar"
        :style="{
            color: isActive
                ? tabBarOptions.activeTextColor
                : tabBarOptions.textColor,
        }"
    >
        <slot name="icon"></slot>
        <slot name="title"></slot>
    </div>
</template>

<script>
import { inject, computed } from "vue"
import { useRouter, useRoute } from "vue-router"
export default {
    name: "tm-tab-bar-item",
    props: {
        activePath: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const router = useRouter()
        const route = useRoute()
        const tabBarOptions = inject("tabBarOptions")
        const isActive = computed(() => {
            return props.activePath === route.path
        })

        const changeTabBar = () => {
            router.push(props.activePath)
        }

        return {
            isActive,
            tabBarOptions,
            changeTabBar
        }
    }
}
</script>
<style lang="scss" scoped>
    .tm-tabBar-item{
        width: 20%;
        height: 100%;
        font-size: $text-font-14;
        .iconfont {
            font-size: 22px;
        }
    }
</style>
